import type { QuizOptionProps, QuizOptionsProps } from './props'
import { View } from '@tarojs/components'
import classNames from 'classnames'
import { useState } from 'react'

export function QuizOption({
  option,
  selected = false,
  disabled = false,
  onSelect,
  showAnswer = false,
  isCorrect = false,
  className,
}: QuizOptionProps) {
  const handleClick = () => {
    if (!disabled && onSelect) {
      onSelect(option.value)
    }
  }

  const getStatus = () => {
    if (showAnswer && selected) {
      return isCorrect ? 'correct' : 'wrong'
    }
    return selected ? 'selected' : 'default'
  }

  const themes = {
    correct: {
      sign: '✓',
      color: '#10b981',
    },
    wrong: {
      sign: '✗',
      color: '#ef4444',
    },
    default: {
      sign: '',
      color: '',
    },
    selected: {
      sign: '✓',
      color: '#3b82f6',
    },
  }

  const status = getStatus()
  const theme = themes[status]

  return (
    <View
      onClick={handleClick}
      className={classNames(
        'flex flex-row items-center gap-3 p-3 rounded-lg border border-solid border-gray-300/50 transition-all duration-200',
        className,
      )}
      style={theme.color
        ? {
            borderColor: `${theme.color}40`,
            backgroundColor: `${theme.color}10`,
          }
        : {}}
    >
      <View
        className={classNames(
          'w-5 h-5 rounded-full border border-solid border-gray-300/50 flex items-center justify-center text-xs font-bold text-white',
        )}
        style={theme.color
          ? {
              backgroundColor: theme.color,
              borderColor: theme.color,
            }
          : {}}
      >
        {theme.sign}
      </View>
      <View className="flex-1 text-gray-800">{option.text}</View>
    </View>
  )
}

export function QuizOptions({
  question,
  disabled = false,
  showAnswer = false,
  onSelect,
  className,
}: QuizOptionsProps) {
  const [selectedValues, setSelectedValues] = useState<string[]>([])

  const handleOptionSelect = (value: string) => {
    if (disabled || showAnswer)
      return

    let newValues: string[]

    if (question.type === 'single') {
      newValues = [value]
    }
    else {
      newValues = selectedValues.includes(value)
        ? selectedValues.filter(v => v !== value)
        : [...selectedValues, value]
    }

    setSelectedValues(newValues)
    onSelect?.(newValues)
  }

  const isOptionSelected = (value: string) => {
    return selectedValues.includes(value)
  }

  const isOptionCorrect = (value: string) => {
    return question.correctAnswer.includes(value)
  }

  return (
    <View className={classNames('space-y-2', className)}>
      {question.options.map(option => (
        <QuizOption
          key={option.id}
          option={option}
          showAnswer={showAnswer}
          selected={isOptionSelected(option.value)}
          disabled={disabled}
          onSelect={handleOptionSelect}
          isCorrect={isOptionCorrect(option.value)}
        />
      ))}
    </View>
  )
}
